import React from 'react';

const HeightClassesDemo: React.FC = () => {
  return (
    <div className="font-sans">
      <h1 className="text-3xl font-bold text-center py-4 bg-gray-600 sticky top-0">Height Classes Demo</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
        {/* min-h-screen demo */}
        <div className="bg-blue-500 min-h-screen p-4">
          <h2 className="text-xl font-semibold mb-2">min-h-screen</h2>
          <p className="mb-4">This container has a minimum height of the viewport.</p>
          <p>It will expand if content exceeds the screen height.</p>
          <div className="mt-4 p-4 bg-blue-500">
            <p>Additional content to demonstrate expansion.</p>
            {[...Array(100)].map((_, index) => (
              <p key={index} className="mt-2">Extra paragraph {index + 1}</p>
            ))}
          </div>
        </div>

        {/* h-screen demo */}
        <div className="bg-green-500 h-screen p-4 overflow-auto">
          <h2 className="text-xl font-semibold mb-2">h-screen</h2>
          <p className="mb-4">This container has a fixed height equal to the viewport.</p>
          <p>Content that exceeds this height will be scrollable.</p>
          <div className="mt-4 p-4 bg-green-600">
            <p>Additional content to demonstrate scrolling.</p>
            {[...Array(120)].map((_, index) => (
              <p key={index} className="mt-2">Scrollable paragraph {index + 1}</p>
            ))}
          </div>
        </div>

        {/* h-full demo */}
        <div className="bg-yellow-500 h-64 p-4">
          <h2 className="text-xl font-semibold mb-2">h-full</h2>
          <div className="h-full bg-yellow-600 p-4 flex flex-col justify-between">
            <p>This inner div takes the full height of its parent.</p>
            <p>The parent has a fixed height of 16rem (h-64).</p>
            <p>The parent has a fixed height of 16rem (h-64-1).</p>
            <p>The parent has a fixed height of 16rem (h-64-2).</p>
            <p>The parent has a fixed height of 16rem (h-64-3).</p>
            <p>The parent has a fixed height of 16rem (h-64-4).</p>
            <p>The parent has a fixed height of 16rem (h-64-5).</p>
            <p>The parent has a fixed height of 16rem (h-64-6).</p>
            <p>The parent has a fixed height of 16rem (h-64-1).</p>
            <p>The parent has a fixed height of 16rem (h-64-2).</p>
            <p>The parent has a fixed height of 16rem (h-64-3).</p>
            <p>The parent has a fixed height of 16rem (h-64-4).</p>
            <p>The parent has a fixed height of 16rem (h-64-5).</p>
            <p>The parent has a fixed height of 16rem (h-64-6).</p>
          </div>
        </div>

        {/* min-h-full demo */}
        <div className="bg-purple-500 h-48 p-4">
          <h2 className="text-xl font-semibold mb-2">min-h-full</h2>
          <div className="min-h-full bg-purple-600 p-4 flex flex-col justify-between">
            <p>This inner div has a minimum height of its parent.</p>
            <p>It will expand if content exceeds the parent's height.</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
            <p>The parent has a fixed height of 12rem (h-48).</p>
          </div>
        </div>

        {/* h-[x] demo */}
        <div className="bg-red-500 p-4">
          <h2 className="text-xl font-semibold mb-2">Custom height (h-[300px])</h2>
          <div className="h-[300px] bg-red-600 p-4 flex flex-col justify-between">
            <p>This div has a custom height of 300px.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>
            <p>Tailwind allows arbitrary values using square brackets.</p>

          </div>
        </div>
      </div>
    </div>
  );
};

export default HeightClassesDemo;

